@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
}
body 
{
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 background: #eff0f4;
}
.container
{
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 gap: 60px;
 padding: 50px 0;
}
.container .drop 
{
 position: relative;
 width: 350px;
 height: 350px;
 box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05),
 25px 35px 20px rgba(0,0,0,0.05),
 25px 30px 30px rgba(0,0,0,0.05),
 inset -20px -20px 25px rgba(255,255,255,0.9);
 display: flex;
 justify-content: center;
 align-items: center;
 transition: 0.5s;
}
.container .drop:nth-child(1)
{
 border-radius: 33% 67% 58% 42% / 51% 33% 67% 49% ;
}
.container .drop:nth-child(2)
{
 border-radius: 63% 37% 43% 57% / 66% 66% 34% 34%  ;
}
.container .drop:nth-child(3)
{
 border-radius: 42% 58% 52% 48% / 72% 30% 70% 28%;
}
.container .drop:nth-child(4)
{
 border-radius: 42% 58% 52% 50% / 72% 30% 70% 28%;
}
.container .drop:hover 
{
 border-radius: 50%;
}
.container .drop::before 
{
 content: '';
 position: absolute;
 top: 50px;
 left: 85px;
 background: #fffd;
 width: 35px;
 height: 35px;
 border-radius: 50%;
}
.drop::after
{
 content: '';
 position: absolute;
 top: 90px;
 left: 110px;
 background: #fffd;
 width: 15px;
 height: 15px;
 border-radius: 50%;
}
.content
{
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 text-align: center;
 padding: 40px;
 gap: 15px;
}
.content h2 
{
 position: relative;
 width: 80px;
 height: 80px;
 font-size: 2em;
 border-radius: 50%;
 display: flex;
 background: #eff0f4;
 justify-content: center;
 align-items: center;
 color: var(--clr);
 box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1),inset -2px -5px 10px rgba(255,255,255,1),
 15px 15px 10px rgba(0,0,0,0.05),
 15px 10px 15px rgba(0,0,0,0.025);
}
.content a 
{
 position: relative;
 padding: 10px 25px;
 text-decoration: none;
 color: #fff;
 font-weight: 500;
 background: var(--clr);
 border-radius: 25px;
 text-shadow: 0 2px 2px rgba(0,0,0,0.25);
 /* box-shadow: 0 10px 15px rgba(0,0,0,0.15); */
 opacity: 0.75;
 transition: 0.5s;
}
.content a:hover 
{
 opacity: 1;
}
.content a::before 
{
 content: '';
 position: absolute;
 top: 8px;
 left: 50%;
 transform: translateX(-50%);
 width: 65%;
 height: 5px;
 background: rgba(255,255,255,0.5);
 border-radius: 5px;
}